import React from "react";
import { Row, Col, Input } from "antd";
import { connect } from "react-redux";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import createSelect from "./createSelect";
import createTextArea from "./createTextArea";
import createInput from "./createInput";

function mapStateToProps(state) {
  return {
    apiProviders: state.apiProvider,
  };
}
@connect(mapStateToProps)
class DataSourceOptions extends React.PureComponent {
  getDatasourceOptions = property => {
    const datasource = this.props.data.get("datasource");
    const onChange = (value, property) => {
      datasource[property] = value;
      this.props.onChange({ ...datasource }, "datasource");
    };
    const onUpdate = (value, property) => {
      datasource[property] = value;
      this.props.onUpdate({ ...datasource }, "datasource");
    };
    return {
      size: "small",
      onChange,
      onEnter: onUpdate,
      data: datasource,
      property,
      getter: (data, property) => data[property].join("\n"),
      getValue: value => value.split("\n"),
    };
  };

  getSelectOptions = (property, options) => {
    const { onUpdate } = this.props;
    const datasource = this.props.data.get("datasource");
    const onChange = (value, property) => {
      datasource[property] = value;
      onUpdate({ ...datasource }, "datasource");
    };
    return {
      size: "small",
      onChange,
      data: datasource,
      property,
      getter: (data, property) => data[property],
      options,
    };
  };

  getInputOptions = (property, options) => {
    const datasource = this.props.data.get("datasource");
    const onUpdate = (value, property) => {
      datasource[property] = value;
      this.props.onUpdate({ ...datasource }, "datasource");
    };
    const onChange = (value, property) => {
      datasource[property] = value;
      this.props.onChange({ ...datasource }, "datasource");
    };
    return {
      size: "small",
      onUpdate,
      onChange,
      data: datasource,
      property,
      getter: (data, property) => data[property],
      options,
    };
  };

  renderStatic() {
    const { data } = this.props;
    const options = data
      .get("datasource")
      .value.map(x => ({ label: x, value: x }));
    options.unshift({ label: '不显示默认值', value: null });
    return (
      <>
        <Row className="row">
          <div className="label">
            <FormattedMessage {...messages.propertyPanelDataSource.options} />
          </div>
          {createTextArea(this.getDatasourceOptions("value"))}
        </Row>
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage {...messages.propertyPanelDataSource.default} />
            </span>
          </Col>
          <Col span={14}>
            {createSelect(this.getSelectOptions("defaultValue", options))}
          </Col>
        </Row>
      </>
    );
  }

  renderDynamic() {
    const { apiProviders, onUpdate } = this.props;
    const datasource = this.props.data.get("datasource");
    const options = apiProviders.map(api => ({
      label: api.name,
      value: api.id,
    }));
    const { apiId, apiParams = {} } = datasource;
    const selectedApi = apiProviders.find(api => api.id === apiId);
    const hasParam = selectedApi && selectedApi.hasParam();
    const onParamChange = (value, paramId) => {
      apiParams[paramId] = value;
      onUpdate({ ...datasource }, "datasource");
    };
    return (
      <>
        <Row className="row">
          <Col span={10}>
            <span className="label">api</span>
          </Col>
          <Col span={14}>
            {createSelect(this.getSelectOptions("apiId", options))}
          </Col>
        </Row>
        {hasParam ? (
          <>
            <Row className="row">
              <span className="label">Parameters</span>
            </Row>
            {selectedApi.params.map(param => (
              <Row className="row" key={param.id}>
                <Col span={10}>
                  <span className="label">{param.name}</span>
                </Col>
                <Col span={14}>
                  <Input
                    value={apiParams[param.id]}
                    defaultValue={param.defaultValue}
                    onChange={event =>
                      onParamChange(event.target.value, param.id)
                    }
                  />
                </Col>
              </Row>
            ))}
          </>
        ) : null}
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage
                {...messages.propertyPanelDataSource.expression}
              />
            </span>
          </Col>
          <Col span={14}>
            {createInput(this.getInputOptions("expression", options))}
          </Col>
        </Row>
      </>
    );
  }

  render() {
    const { data } = this.props;
    const isStatic = data.get("datasource").type === "static";
    return (
      <>
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage {...messages.propertyPanelDataSource} />
            </span>
          </Col>
          <Col span={14}>
            {createSelect(
              this.getSelectOptions("type", [
                {
                  label: "静态的",
                  value: "static",
                },
                {
                  label: "动态的",
                  value: "dynamic",
                },
              ])
            )}
          </Col>
        </Row>
        {isStatic ? this.renderStatic() : this.renderDynamic()}
      </>
    );
  }
}

export default function createDataSource(config = {}) {
  const { onChange, onUpdate, data } = config;
  return (
    <DataSourceOptions
      onChange={onChange} onUpdate={onUpdate}
      data={data}
    />
  );
}
